<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            margin: 5px;
        }

        .con iframe {
            margin: 5px;
            width: 70px;
            height: 70px;
        }

        .con {
            flex-direction: column;
        }

        .txt {
            align-content: center;

        }

        div {
            display: flex;
        }
        a{
            display: inline-block;
            width: 70px;
            padding-left: 20px;
            padding-right: 20px;
            overflow: hidden;
            text-overflow:ellipsis;
        }
        .if{
            display: block;
            position: absolute;
            width:70px;
            height:70px;
            cursor: pointer;
        }
    </style>

</head>
<body>

<div style="display: flex;flex-direction:column;width:100%;height:100%;">
    <div><input id="path" width="500">
        <input type="button" onclick="submit()" value="确定">
        <input type="button" value="上一页" onclick="nextFiles(false)">
        <input type="button" value="下一页" onclick="nextFiles(true)">
        <input type="text"  id="copyElement">
        <input type="text"  id="copyFile">
    </div>
    <div id="con" style="flex-wrap: wrap;flex-grow: 10;flex-direction: row">

    </div>
</div>
<script>
    var files = [];
    var curIndex = 0;
    var pagecount = 0;
    var pageSize = 22*10;
    var path;
    var copyElement = document.getElementById("copyElement");
    var fileElement = document.getElementById("copyFile");
    function submit() {
        path = document.getElementById("path").value;
        if (!path) {
            return;
        }
        getFiles()
    }
    function getFiles() {
        fetch("/getFiles?path=" + path)
            .then(function (rsp) {
                return rsp.json();
            })
            .then(function (rsp) {
                files = rsp;
                curIndex = 0
                pagecount = Math.floor((files.length + pageSize - 1) / pageSize)
                showFiles(true);
            })

    }
    function nextFiles(next) {
        if (next) {
            if (curIndex == pagecount-1) {
                return
            } else {
                curIndex++
            }
        } else {
            if (curIndex == 0) {
                return
            } else {
                curIndex--
            }
        }
        showFiles();
    }
    function showFiles() {

        var hts = [];
        for (var i = curIndex * pageSize; i < curIndex * pageSize+pageSize&&i<files.length; i++) {
            var f = files[i];
            hts.push('<div class="con"><div class="if"  pathdata="'+f+'" onclick="doCopy(this)"></div>' +
                '<iframe   src="/getFileContent?path=' + path + '&name=' + f + '"></iframe>' +
                '</div>');
        }
        var con = document.getElementById("con");
        con.innerHTML = hts.join("")

    }
    function doCopy(a) {
        var data = (path.replace(/(\\\\)|(\/\/)|(\/\\)|(\\\/)/g, "/")+"/"+ a.getAttribute("pathdata").replace(/(\\\\)|(\/\/)|(\/\\)|(\\\/)/g, "/")).replace(/(\\\\)|(\/\/)|(\/\\)|(\\\/)|(\\)/g, "/");
        var pt=data.split("/")
        var ptlast=pt.pop();
        var _path=pt.join("/");
        var file=ptlast;
        copyElement.focus();
        copyElement.value = data;
        fileElement.value=file;
        copyElement.setSelectionRange(0, data.length)
        document.execCommand("copy")
    }
</script>

</body>
</html>